/* 测距的提示工具 */
import { Overlay } from "ol";
import {LineString,Polygon} from "ol/geom";
import {getLength} from "ol/sphere.js";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill.js";
import Stroke from "ol/style/Stroke.js";
import Circle from "ol/style/Circle.js";
import  "../jsmap.css";

class RangingToolTip {

  constructor(map) {
    //地图实例
    this.map = map;
    //测量提示工具
    this.measureTooltipElement=null;
    //帮助提示工具
    this.helpTooltipElement=null;

    this.measureTooltip=null;
    this.helpTooltip=null;
    //是否在画
    this.sketch=null;
    this.continuePolygonMsg='单击继续绘制多边形......';
    this.continueLineMsg='单击继续画线......';
    this.mouseoutEvent=null;
    this.pointermoveEvent=null;
  }

  /**
   * 创建测量提示工具
   */
  createMeasureTooltip = function(){
    if (this.measureTooltipElement) {
      this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement);
    }
    this.measureTooltipElement = document.createElement('div');
    this.measureTooltipElement.className = 'tooltip tooltip-measure  remove_div';

    this.measureTooltip = new Overlay({
      element: this.measureTooltipElement,
      offset: [0, -15],
      positioning: 'bottom-center'
    });
    this.map.addOverlay(this.measureTooltip);
  };

  /**
   * 创建帮助提示工具
   */
  createHelpTooltip = function() {
    if (this.helpTooltipElement) {
      this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
    }
    this.helpTooltipElement = document.createElement('div');
    this.helpTooltipElement.className = 'tooltip hidden remove_div';

    console.log("createHelpTooltip.helpTooltipElement: %o",this.helpTooltipElement);

    this.helpTooltip = new Overlay({
      element: this.helpTooltipElement,
      offset: [15, 0],
      positioning: 'center-left'
    });
    this.map.addOverlay(this.helpTooltip);
  };

  /**
   * 鼠标移动
   * @param evt
   */
  pointerMoveHandler = (evt)=> {
    if (evt.dragging) {
      return;
    }
    let helpMsg = '单击开始，双击完成......';
    if (this.sketch) {
      const geom = (this.sketch.getGeometry());
      if (geom instanceof Polygon) {
        //是否在画多边形
        helpMsg = this.continuePolygonMsg;
      } else if (geom instanceof LineString) {
        //是否在画线
        helpMsg = this.continueLineMsg;
      }
    }

    this.helpTooltipElement.innerHTML = helpMsg;
    this.helpTooltip.setPosition(evt.coordinate);
    /** 显示 */
    this.helpTooltipElement.classList.remove('hidden');
  };

  /**
   * 设备 map
   * @param map
   */
  setMap(map){
    const that = this;
    this.map=map;
    this.createMeasureTooltip();
    this.createHelpTooltip();
    this.pointermoveEvent = this.map.on('pointermove', this.pointerMoveHandler);
    this.mouseoutEvent=this.map.getViewport().addEventListener('mouseout', function() {
      that.helpTooltipElement.classList.add('hidden');
    });
  };

  /**
   * 格式化显示距离
   * @param line
   * @returns {string}
   */
  formatLength(line) {
    const sourceProj = this.map.getView().getProjection();
    const length = getLength(line,{projection: sourceProj});
    let output;
    if (length > 100) {
      output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
    } else {
      output = (Math.round(length * 100) / 100) + ' ' + 'm';
    }
    return output;
  };

  /**
   * 返回样式
   * @returns {Style}
   */
  range_style(){
    return new Style({
      fill: new Fill({color: 'rgba(255, 255, 255, 0.2)'}),
      stroke: new Stroke({
        color: 'rgba(0, 0, 255, 0.5)',
        lineDash: [10, 10],
        width: 2
      }),
      image: new Circle({
        radius: 5,
        stroke: new Stroke({color: 'rgba(0, 0, 255, 0.7)'}),
        fill: new Fill({color: 'rgba(255, 255, 255, 0.2)'})
      })

    })
  };
}
export default RangingToolTip;
